<template>
   <div>
     <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%" 
   border="true"
    >
     <el-table-column class="el-size"
      label="ID"
      width="60px"
      prop="id">
    </el-table-column>
    <el-table-column class="el-size"
      label="姓名"
      width="65px"
      prop="name">
    </el-table-column>
     <el-table-column
      label="手机号码"
      prop="phone"
      width="110px"
      >
    </el-table-column>
 
    <el-table-column
      label="状态"
      width="100px"
      prop="status">
      <template slot-scope="scope">
					<el-tag size="small" v-if="scope.row.status ===0" type="info" >未受理</el-tag>
					<el-tag size="small" v-else-if="scope.row.status ===1" type="primary" >已受理</el-tag>
					<el-tag size="small" v-else-if="scope.row.status ===2" type="info" >已转发</el-tag>
          	<el-tag size="small" v-else-if="scope.row.status ===3" type="danger" >已驳回</el-tag>
            <el-tag size="small" v-else-if="scope.row.status ===4" type="primary" >处理中</el-tag>
					<el-tag size="small" v-else-if="scope.row.status ===5" type="warning" >已结案</el-tag>
          	<el-tag size="small" v-else-if="scope.row.status ===6" type="success" >已归档</el-tag>
				</template>
    </el-table-column> 
     <el-table-column
      label="地址"
      width="80px"
      prop="address">
    </el-table-column>   
     <el-table-column
      label="备注"
      width="80px"
      prop="remarks">
    </el-table-column>   
     <el-table-column
      label="来访时间"
      width="95px"
      prop="time">
    </el-table-column>     
    
     <el-table-column
      label="结案时间"
      width="95px"
      prop="end">
    </el-table-column>  
     <el-table-column
      label="归档时间"
      width="95px"
      prop="achieve">
    </el-table-column>  
<el-table-column
      label="证据文件"
       width="140px"
      prop="file">
      <template slot-scope="scope">
        <div class="bule-font-color"  @click="downLoad(scope.row.file)" v-if="scope.row.file"><font color="#409EFF">查看文件</font></div>
      </template>
      </el-table-column>  

      <el-table-column width="140px"
      label="结案文件"
      prop="documents">
      <template slot-scope="scope">
        <div class="bule-font-color"  @click="downLoad(scope.row.documents)" v-if="scope.row.documents"><font color="#67C23A">查看文件</font></div>
      </template>
</el-table-column>
 <el-table-column
       prop="organization"
      
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="姓名关键字搜索"/>
      </template>
       
 </el-table-column>
  </el-table>
  	<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
				:page-sizes="[5, 10, 20, 50]"
				:current-page="current"
				:page-size="size"

				:total="total">
		</el-pagination>
    
	
      </div>
    </template>


<script>

export default {
name:"Visit", 
data() {
      return {
        tableData: [],
        search: '',
        dialogVisible: false,
        isHandle:'',
				editForm: {

				},


      }
    },
    methods: {
        handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.size = val
				this.getTodayList()
			},
	    handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.current = val
				this.getTodayList()
			},
        handleClose() {
				this.dialogVisible = false
			},
      getTodayList(){
        this.$axios.get("/file/all",	{params: {
						current: this.current,
						size: this.size
					}}).then(res => {
          const data=res.data.data.records
           this.tableData=data
          this.size = res.data.data.size
					this.current = res.data.data.current
					this.total = res.data.data.total
					// data.forEach(element => {
          //   element.file="https://www.gjtool.cn/pdfh5/git.pdf"
          // });
         
				})
      },
      downLoad(url){
     window.open(url);
    },
  
    },
     created(){
      this.getTodayList()
     

    },
   
    
    
}
</script>

<style>
.my-label {
    background: #E1F3D8;
  }

  .my-content {
    background: #FDE2E2;
  }
  .el-size{
    width: 20px;
  }
  .el-pagination {
    text-align: center; 
}
</style>
